<script setup lang="ts">
import { IcOrder } from '@/apis/order/sameCityOrder/types'
import computedTime from '@/utils/computedTime'
import { type PropType } from 'vue'

const props = defineProps({
    orderItem: {
        type: Object as PropType<IcOrder>,
        default: () => ({}),
    },
})
const wtachDetail = () => {
    uni.navigateTo({
        url: `/basePackage/pages/deliveryOrder/detail?id=${props.orderItem.icNo}&status=${props.orderItem.status}`,
    })
}
</script>

<template>
    <view v-if="orderItem.receiver" class="done_order_card" @click="wtachDetail">
        <view class="time">
            <view class="time_left"
                >{{ orderItem.times.takeOrderTime?.replaceAll('-', '/')?.slice(5) }} -
                {{ orderItem.times.deliveredTime?.replaceAll('-', '/')?.slice(5) }}</view
            >
            <view class="time_right">{{ computedTime(orderItem.deliverSeconds || 0) }}</view>
        </view>
        <view class="city">
            <view class="dot"></view>
            <view class="city_name">{{ orderItem.receiver.address?.split('~')[1] || '' }}</view>
        </view>
        <view class="address">{{ orderItem.receiver.address?.split('~')[0] || '' }}{{ orderItem.receiver.address?.split('~')[2] || '' }}</view>
        <view class="order_no">订单编号：{{ orderItem.orderNo }}</view>
    </view>
</template>

<style lang="scss" scoped>
.done_order_card {
    padding: 36rpx 13rpx;
    display: flex;
    flex-direction: column;
    .time {
        display: flex;
        margin-bottom: 22rpx;
        .time_left {
            color: rgb(153, 153, 153);
            font-size: 26rpx;
            font-weight: 500;
        }
        .time_right {
            margin-left: auto;
            color: rgb(51, 51, 51);
            font-size: 28rpx;
            font-weight: 500;
        }
    }
    .city {
        display: flex;
        align-items: center;
        margin-bottom: 14rpx;
        .dot {
            background: rgb(85, 92, 253);
            width: 12rpx;
            height: 12rpx;
            border-radius: 50%;
            margin-right: 10rpx;
        }
        .city_name {
            color: rgb(51, 51, 51);
            font-size: 28rpx;
            font-weight: bold;
        }
    }
    .address {
        margin-left: 22rpx;
        color: rgb(51, 51, 51);
        font-size: 28rpx;
        font-weight: 500;
        margin-bottom: 14rpx;
    }
    .order_no {
        margin-left: 22rpx;
        color: rgb(153, 153, 153);
        font-size: 26rpx;
        font-weight: 500;
    }
}
</style>
